<template>
  <!-- 数据录入 -->
  <div id="DataAcquisition">
    <el-tabs v-model="tabs" type="border-card" class="elTabs" @tab-click="tabsChange">
      <el-tab-pane v-for="item in elTabs" :key="item.value" :name="item.value">
        <span slot="label" class="elTabs_span"><svg-icon :icon-class="item.icon" />{{ item.label }}</span>
        <div class="search">
          <span v-if="item.value == 'imageText'" class="searchLabel">{{ item.label }}关键字：</span>
          <span v-else-if="item.value == 'image'" class="searchLabel">{{ item.label }}备注：</span>
          <span v-else class="searchLabel">{{ item.label }}名称：</span>
          <el-input v-model.trim="form.name" class="searchItem" placeholder="请输入内容" clearable />
          <span class="searchLabel">状态：</span>
          <el-select v-model="form.status" placeholder="请选择" class="searchItem">
            <el-option v-for="(item2, index) in options1" :key="index" :label="item2.name" :value="item2.code" style="font-size:0.16rem;" />
          </el-select>
          <span class="searchLabel">审批流程：</span>
          <el-select v-model="form.approveProcess" placeholder="请选择" class="searchItem">
            <el-option v-for="item3 in options2" :key="item3" :label="item3" :value="item3" style="font-size:0.16rem;" />
          </el-select>
          <el-button type="primary" @click="searchClick()">查询</el-button>
          <el-button type="primary" @click="resetClick">重置</el-button>
          <p style="display:inline-block;0;margin:0 0.5rem;">
            <el-button v-if="item.value =='imageText'" icon="el-icon-plus" type="primary" @click="addImageText">新建{{ item.label }}</el-button>
            <el-button v-else-if="item.value =='html'" icon="el-icon-plus" type="primary" @click="add('html')">新增{{ item.label }}</el-button>
            <el-button v-else icon="el-icon-plus" type="primary" @click="add()">上传{{ item.label }}</el-button>
          </p>
        </div>
        <image-text v-if="item.value =='imageText'" ref="ImageTextPage" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="#fff" class="Data_main" />
        <image-list v-else-if="item.value =='image'" ref="ImageList" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="#fff" class="Data_main" />
        <file-list v-else-if="item.value =='file'" ref="FileList" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="#fff" class="Data_main" />
        <voice-list v-else-if="item.value =='voice'" ref="VoiceList" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="#fff" class="Data_main" />
        <video-list v-else-if="item.value =='video'" ref="VideoList" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="#fff" class="Data_main" />
        <htmls-list v-else-if="item.value =='html'" ref="HtmlList" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="#fff" class="Data_main" />
      </el-tab-pane>
    </el-tabs>
    <div class="pagination">
      <el-pagination
        popper-class="DataAcquisition_fenye"
        :current-page="form.pageNum"
        background
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 上传图片/文件 -->
    <up-load v-if="openUploadDialog" ref="upLoadImageText" />
    <!-- 新增网页 -->
    <add-html v-if="openhtmlDialog" ref="addHtml" />
  </div>
</template>

<script>
import ImageText from './imageText'
import ImageList from './imageList'
import FileList from './fileList'
import VoiceList from './voiceList'
import VideoList from './videoList'
import HtmlsList from './htmlList'
import UpLoad from '../components/upLoad'
import AddHtml from '../components/addHtml'
import { bus } from '@/main'
export default {
  name: 'DataAcquisition',
  components: {
    ImageText,
    ImageList,
    FileList,
    VoiceList,
    VideoList,
    HtmlsList,
    UpLoad,
    AddHtml
  },
  data() {
    return {
      tabs: '',
      loading: true,
      options1: [], // 状态
      options2: [], // 审批流程
      form: {
        type: '', // '0'图文/1图片/2文件/3语音/4视频/5网页
        name: '', // 搜索字段
        status: '', // 状态： ''全部/1待提交/2
        // 审核中/3已审核/4已发布/5已退回
        approveProcess: '', // 审批流程： 0党群信息审批流程/1精神宣贯审批流程/2通知公告审批流程
        pageNum: 1,
        pageSize: 10
      },
      rules: {
        approveProcess: [
          { required: false, trigger: 'blur' }
        ]
      },
      total: 0,
      openUploadDialog: false,
      openhtmlDialog: false
    }
  },
  computed: {
    // tab
    elTabs() {
      const tab = [
        { label: '图文', value: 'imageText', icon: 'image-text' },
        { label: '图片', value: 'image', icon: 'image' },
        { label: '文件', value: 'file', icon: 'file' },
        { label: '语音', value: 'voice', icon: 'voice' },
        { label: '视频', value: 'video', icon: 'video' },
        { label: '网页', value: 'html', icon: 'computer' }
      ]
      return tab
    }
  },
  created() {
    this.tabs = sessionStorage.getItem('tabs') ? sessionStorage.getItem('tabs') : 'imageText'
    // 状态下拉框
    this.$api.getStatus('').then((response) => {
      if (response.data.status == 1) {
        this.options1 = JSON.parse(JSON.stringify(response.data.data))
       this.options1.unshift({ name: '全部', code: '' })
        this.form.status = this.options1[0].code
      } else {
        this.$message.error(response.data.msg)
      }
    })
    // 审批流程下拉框
    this.$api.getApproveProcess().then((response) => {
      if (response.data.status == 1) {
        this.options2 = JSON.parse(JSON.stringify(response.data.data))
        this.form.approveProcess = this.options2[0]
      } else {
        this.$message.error(response.data.msg)
      }
    })
    this.searchClick()
    // 数据列表中进行提交、删除、撤回等操作后，重新请求数据，刷新页面
    bus.$on('refreshList', (msg) => {
      this.form.pageNum = 1
      this.searchClick()
    })
  },
  methods: {
    // tab 切换
    tabsChange(data) {
      this.form = {
        name: '',
        status: '',
        approveProcess: this.options2[0],
        pageNum: 1,
        pageSize: 10
      }
      sessionStorage.setItem('tabs', data.name)
      // 切换tab后重置搜索参数，重新请求数据
      this.searchClick()
    },
    // 搜索
    async searchClick() {
      const obj = this.form
      let name = ''
      this.loading = true
      // 根据当前tab页，做对应数据请求，通过$refs方法将返回数据传入对应组件中
      switch (this.tabs) {
        case 'imageText':
          name = '图文'
          this.$api.getImageText(obj).then(response => {
            if (response.data.status == 1) {
              setTimeout(() => {
                this.loading = false
                const data = response.data.data
                this.total = data.total
                this.$refs.ImageTextPage[0].getData(data.list, name)
              }, 0.5 * 1000);
            } else {
              setTimeout(() => {
                this.loading = false
                this.$message.error(response.data.msg)
              }, 0.5 * 1000);
            }
          }).catch(() => this.loading = false)
          break;
        case 'image': // 图片
          name = '图片'
          this.$api.getImageList(obj).then(response => {
            if (response.data.status == 1) {
              setTimeout(() => {
                this.loading = false
                const data = response.data.data
                this.total = data.total
                this.$refs.ImageList[0].getData(data.list, name)
              }, 0.5 * 1000);
             } else {
              setTimeout(() => {
                this.loading = false
                this.$message.error(response.data.msg)
              }, 0.5 * 1000);
            }
          }).catch(() => this.loading = false)
          break;
        case 'file': // 文件
          name = '文件'
          this.$api.getFileList(obj).then(response => {
            if (response.data.status == 1) {
              setTimeout(() => {
                this.loading = false
                const data = response.data.data
                this.total = data.total
                this.$refs.FileList[0].getData(data.list, name)
              }, 0.5 * 1000);
            } else {
              setTimeout(() => {
                this.loading = false
                this.$message.error(response.data.msg)
              }, 0.5 * 1000);
            }
          }).catch(() => this.loading = false)
          break;
        case 'voice':
          name = '语音'
          this.$api.getVoiceList(obj).then(response => {
            if (response.data.status == 1) {
              setTimeout(() => {
                this.loading = false
                const data = response.data.data
                this.total = data.total
                this.$refs.VoiceList[0].getData(data.list, name)
              }, 0.5 * 1000);
            } else {
              setTimeout(() => {
                this.loading = false
                this.$message.error(response.data.msg)
              }, 0.5 * 1000);
            }
          }).catch(() => this.loading = false)
          break;
        case 'video':
          name = '视频'
          this.$api.getVideoList(obj).then(response => {
            if (response.data.status == 1) {
              setTimeout(() => {
                this.loading = false
                const data = response.data.data
                this.total = data.total
                this.$refs.VideoList[0].getData(data.list, name)
              }, 0.5 * 1000);
            } else {
              setTimeout(() => {
                this.loading = false
                this.$message.error(response.data.msg)
              }, 0.5 * 1000);
            }
          }).catch(() => this.loading = false)
          break;
        case 'html':
          name = '网页'
          this.$api.getHtmlList(obj).then(response => {
            if (response.data.status == 1) {
              setTimeout(() => {
                this.loading = false
                const data = response.data.data
                this.total = data.total
                this.$refs.HtmlList[0].getData(data.list, name)
              }, 0.5 * 1000);
            } else {
              setTimeout(() => {
                this.loading = false
                this.$message.error(response.data.msg)
              }, 0.5 * 1000);
            }
          }).catch(() => this.loading = false)
          break;
        default:
          break;
      }
    },
    // 重置
    resetClick() {
      this.form = {
        name: '',
        status: '',
        approveProcess: this.options2[0]
      }
      this.searchClick()
    },
    // 上传图片/文件
    add(val) {
      // 判断当前tab，打开对应的弹窗
      if (this.tabs === 'html') {
        this.openUploadDialog = false
        this.openhtmlDialog = true
      } else {
        this.openUploadDialog = true
        this.openhtmlDialog = false
      }
      // 因弹窗是被v-if控制，弹窗打开后，DOM节点创建速度慢于js执行速度，导致取不到对应$refs，无法往对应组件内传值。
      // 设置延时，等待DOM创建完后再执行下列代码
      setTimeout(() => {
        if (val) {
          this.$refs.addHtml.getParam({ open: true })
        } else {
          this.$refs.upLoadImageText.getParam({ open: true, tabs: this.tabs })
        }
      }, 100)
    },
    // 改变每页数据条目数
    handleSizeChange(val) {
      this.form.pageSize = val
      this.searchClick()
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.searchClick()
    },
    // 跳转， 新增
    addImageText() {
      this.$router.push('/Dashboard/dashboardAddData')
    }
  },
  beforeDestroy() {
    sessionStorage.removeItem('tabs')
  }
}
</script>

<style lang="scss" scoped>
#DataAcquisition {
  width: 100%;
  >>>.elTabs {
    border: none;
    * {
      font-size: 0.16rem;
    }
    .elTabs_span {
      font-size: 0.16rem;
      svg {
        margin-right: 0.1rem;
        width: 0.2rem;
        height: 0.2rem;
        vertical-align: -0.2em;
      }
    }
    .search {
      .searchLabel {
        width: 1.1rem;
        font-size: 0.16rem;
        text-align: right;
        display: inline-block;
      }
      .searchItem {
        width: 2.5rem;
      }
    }
    .el-tabs__header .el-tabs__item {
      color: #333;
    }
    .el-tabs__header .el-tabs__item:not(.is-disabled):hover,
    .el-tabs__header .el-tabs__item.is-active {
      color: #409EFF;
    }
  }
  .pagination {
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 0px 0px rgba(0,0,0,.12), 0 2px 6px 0 rgba(0,0,0,.04);
    text-align: right;
    padding: 0.15rem;
    padding-top: 0;
    >>>.el-pagination {
      * { font-size: 0.16rem }
    }
  }
}
</style>
<style lang="scss">
.DataAcquisition_fenye {
  .el-select-dropdown__item {
    font-size: 0.16rem;
  }
}
</style>
